<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div v-click-select="handler">
				<button @click.stop="show=!show">点击出现下拉框</button>
				<div v-show="show">
					<ul>
						<li>下拉框</li>
						<li>下拉框</li>
						<li>下拉框</li>
						<li>下拉框</li>
					</ul>
				</div>
			</div>
		</div>
		<script>
			/*
				点击出现下拉框：
					1. 点击按钮出现下拉框
					2. 点击页面空白地方，下框消失
			*/
			// 注册一个指令
			/*
				全局注册 局部注册
				Vue.directive('指令名（focus）',{
					bind：只调用一次，指令第一次绑定到元素时调用
					inserted：被绑定元素插入父节点时调用 
					update：更新时调用
					componentUpdated： 更新完毕调用
					unbind：只调用一次，指令与元素解绑时调用
				})
				使用：v-focus

				钩子函数接收的参数：
					el:指令所绑定的元素，可以用来直接操作 DOM
					binding:
						name  指令名
						value 解析后的值
						expression 写在指令的表达式
						modifiers 修饰符
				
				控制台用：
					getEventListeners(node)
					查看使用addEventListener绑定的监听器
			*/

			Vue.directive('click-select',{
				bind(el,binding){
					function handle(ev){
						console.log(el);
						console.log(ev.target);
						console.log(el.contains(ev.target));
						if(el.contains(ev.target)){
							return;
						}

						if(binding.expression){
							binding.value();
						}	
					}
					el.__clickHandle__ = handle;
					document.addEventListener('click',handle)
				},
				unbind(el,binding){

					document.removeEventListener('click',el.__clickHandle__);
					delete el.__clickHandle__
				}
			})

			new Vue({
				el: '#app',
				data:{
					message: '父级的数据',
					show: false
				},
				methods: {
					handler () {
						console.log('执行了');
						this.show = false;
					}
				}
			})

		</script>
	</body>
</html>